import React, {
  useState,
  useEffect,
  useCallback,
  useImperativeHandle,
  forwardRef,
  useMemo,
} from 'react';
import { getMessage, TextWidget } from '@inbiz/react';
import {
  Tree,
  Input,
  Table,
  Checkbox,
  Spin,
  message,
  ConfigProvider,
} from 'antd';
import { GlobalRegistry, inbiz } from '@inbiz/core';
import { formatBytes, useEvents, InbizIcon, commonLang } from '@inbiz/utils';
import { intl } from '@inbiz/basic/container';
import Pagination from '@inbiz/basic/Pagination';
import moment from 'moment';
import { DataNode } from 'antd/lib/tree';
import api from '../SelectDoc/api';
import EformSelectFolderService from '../SelectDoc/service';
import Util, { fileData, getFolderName } from '../SelectDoc/util';
// import PageComponent from '../PageComponent';
import '../SelectDoc/index.less';

export type ModeType = 'SelectFolder' | 'SelectFile';

type IPorps = {
  mode: ModeType;
  lang: string;
  value?: any;
  inbiz: inbiz;
  callBackEvents?: {};
  placeholder?: string;
  showPersonalLibrary?: boolean;
  hidePersonalChildren?: boolean; // 是否显示个人库的子节点
  multiple: boolean;
  topFolder?: any;
  columnField: [];
  visibleModal: boolean;
  selectNum: number;
  setSelectNum: Function;
  selectData: any[];
  setSelectData: Function;
  onChange: Function;
  setSelectDatas: Function;
  selectDatas: any;
  isShowSelectData: boolean;
  selectedRowKeys: string[];
  setSelectedRowKeys: Function;
  emit?: any;
  showTeam?: boolean;
  controlId?: string;
  hiddenFolder?: boolean;
  remoteServer?: {
    url: string;
    token: string;
  };
};

function ModalData(props: IPorps, ref: any) {
  const {
    mode,
    columnField = [],
    multiple,
    topFolder,
    visibleModal,
    setSelectNum,
    setSelectDatas,
    selectDatas,
    isShowSelectData,
    selectedRowKeys,
    setSelectedRowKeys,
    showTeam,
    hiddenFolder,
    hidePersonalChildren,
  } = props;

  const util = useMemo(() => new Util({ intl }, true), []);
  const [configEvents] = useEvents(props.callBackEvents, props.emit);

  useImperativeHandle(
    ref,
    () => ({
      ...api(configEvents),
      setTreeData,
    }),
    [],
  );

  const [spinning, setSpinning] = useState<boolean>(true); //加载动画
  const [treeData, setTreeData] = useState<any[]>([]); //树型控件数据
  const [pageSize, setPageSize] = useState<number>(10); //页容量
  const [current, setCurrent] = useState<number>(1); //页数
  const [total, setTotal] = useState<number>(0); //总数
  const [selectFolder, setSelectFolder] = useState<any>(); //树形选择的文件夹
  const [isSelect, setIsSelect] = useState<boolean>(true); //包含子文件夹
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]); //树形展开的行
  const [selectedKeys, setSelectedKeys] = useState<string[]>(); //树形选择的行
  const [searchValue, setSearchValue] = useState<string>(); //搜索的值
  const [loadedKeys, setLoadedKeys] = useState<boolean>(false); //是否初次加载
  const [systemNum, setSystemNum] = useState<number>(0); //系统设定的目录加载数
  const [loading, setLoading] = useState<boolean>(false); //加载更多中
  const [locale, $locale] = useState(commonLang[GlobalRegistry.getDesignerLanguage()?.toLocaleLowerCase() as keyof typeof commonLang])
  const service = new EformSelectFolderService({
    intl: intl,
    remoteServer: props.remoteServer,
  });

  const onTreeDate = useCallback(() => {
    setSpinning(true);

    return service
      .getTopFolders({
        topFolderIds: topFolder?.length > 0 ? topFolder[0].id : 1,
        showEnterprise: true,
        showPerson: props.showPersonalLibrary,
        showTeam: showTeam,
      })
      .then(async (res) => {
        if (!res.length) {
          message.destroy();
          message.error(getMessage('DocSelect.topFolderNotIn') + '!');
          setSpinning(false);
          return;
        }
        if (Array.isArray(res)) {
          setSystemNum(res?.[0]?.ChildrenPageSize);
          const folderName = await getFolderName()
          let newData = res.map((v: any) => {
            return util.formatData(v, folderName);
          });
          const nodeData = newData.map((item: any) => {
            if (
              item.children?.length &&
              item.children.length < item.folderCount
            ) {
              item.children.push({
                gid: item.id,
                style: { color: '#aaa' },
                name: getMessage('DocSelect.loadMore'),
                title: getMessage('DocSelect.loadMore'),
                key: `${item.id}-undefined`,
                count: item.folderCount,
                isLeaf: true,
                parentKey: item.key,
              });
            }
            return item;
          });
          if (hidePersonalChildren) {
            const personalData = nodeData.find(
              (item) => item.topfolderpath == '2',
            );
            if (personalData?.children?.length) {
              personalData.children = [];
              personalData.isLeaf = true;
            }
          }
          setSelectedKeys([newData[0].key]);
          setExpandedKeys([newData[0].key]);
          setLoading(true);
          setTreeData(nodeData);
          setSelectFolder(newData[0]);
        }
      })
      .catch((e) => {
        setSpinning(false);
      });
  }, [topFolder, util, hidePersonalChildren]);

  useEffect(() => {
    $locale(commonLang[GlobalRegistry.getDesignerLanguage()?.toLocaleLowerCase() as keyof typeof commonLang])
  }, [GlobalRegistry.getDesignerLanguage()]);

  useEffect(() => {
    onTreeDate();
    setLoadedKeys(true);
  }, []);

  const updateTreeData = (
    list: DataNode[],
    key: React.Key,
    children: DataNode[],
  ): DataNode[] => {
    return list.map((node) => {
      if (node.key === key) {
        return {
          ...node,
          children,
        };
      }

      if (node.children) {
        return {
          ...node,
          children: updateTreeData(node.children, key, children),
        };
      }

      return node;
    });
  };

  const onLoadData = ({ key, children, id }: any) => {
    return new Promise<void>(async (resolve) => {
      if (children) {
        resolve();
        return;
      }

      let res = await service.getTopFolders({
        topFolderIds: id,
        showEnterprise: true,
        showPerson: false,
        showTeam: false,
      });

      let resData;
      if (res.length > 0 && res[0].Children?.length) {
        resData = res.map((v: any) => {
          return util.formatData(v);
        });

        children = resData[0].children;
        if (children?.length && children.length < resData[0].folderCount) {
          children.push({
            gid: id,
            style: { color: '#aaa' },
            name: getMessage('DocSelect.loadMore'),
            title: getMessage('DocSelect.loadMore'),
            key: `${id}-undefined`,
            isLeaf: true,
            count: resData[0].folderCount,
            parentKey: resData[0].key,
          });
        }
      }

      setTreeData((origin) => updateTreeData(origin, key, children));
      resolve();
    });
  };

  const onLoad = (
    loadedKeys: any[],
    { event, node }: { event: any; node: any },
  ) => {
    setExpandedKeys((expandedKeys) => [...expandedKeys]);
  };

  const treeIcon = (props: any) => {
    if (props.data?.key?.indexOf('undefined') !== -1) {
      return (
        <InbizIcon
          type={'icon-ic-jiazaigengduo'}
          style={{ fontSize: 16, color: '#ccc' }}
        />
      );
    }
    if (
      props.id === 1 ||
      props.id === 7 ||
      props.ParentFolderId === 2 ||
      props.ParentFolderId === 7
    ) {
      if (props.ParentFolderId === 2) {
        return (
          <InbizIcon
            type={'icon-system-tree-gerenku'}
            // style={{ fontSize: 16, color: '#8bc4fc' }}
            style={{ fontSize: 16, color: 'var(--inbiz-color-primary)' }}
          ></InbizIcon>
        );
      } else if (props.id === 1) {
        return (
          <InbizIcon
            type={'icon-system-tree-tuanduiku'}
            // style={{ fontSize: 16, color: '#8bc4fc' }}
            style={{ fontSize: 16, color: 'var(--inbiz-color-primary)' }}
          ></InbizIcon>
        );
      } else {
        return (
          <InbizIcon
            type={'icon-system-tree-team2'}
            // style={{ fontSize: 16, color: '#8bc4fc' }}
            style={{ fontSize: 16, color: 'var(--inbiz-color-primary)' }}
          ></InbizIcon>
        );
      }
    } else {
      if (props.expanded) {
        return (
          <InbizIcon
            type={'icon-ic-tree-folder-open-y'}
            style={{ fontSize: 16 }}
          ></InbizIcon>
        );
      } else {
        return (
          <InbizIcon
            type={'icon-ic-tree-folder-y'}
            style={{ fontSize: 16 }}
          ></InbizIcon>
        );
      }
    }
  };

  const onSearch = async (value: string) => {
    setCurrent(1);
    setSearchValue(value);

    if (!value) {
      getFileOrFolder(selectFolder);
      return;
    }
    search({
      folderId: selectFolder?.id,
      pageSize,
      pageNum: current,
      keyword: value,
      isPerson: selectFolder?.topfolderpath == '2',
    });
  };

  const search = async (parse: {
    folderId: number;
    pageSize: number;
    pageNum: number;
    keyword: string;
    isPerson: boolean;
  }) => {
    const { folderId, pageSize, pageNum, keyword, isPerson } = parse;
    if (mode === 'SelectFile') {
      let res = await service.searchFiles({
        folderId: folderId || 1,
        pageSize,
        pageNum,
        keyword,
        isSelect,
        isPerson,
      });

      let arr = res.docListInfo?.FilesInfo?.map((item: any) => {
        return {
          ...item,
          key: item.id,
          name: item.name,
          size: item.size,
          creater: item.creatorname,
          modifier: item.editorname,
          modifyDate: moment(item.modifytime).format('YYYY-MM-DD hh:mm:ss'),
          edition: item.lastvernumstr,
          address: `${item.relativepath?.split('\\').join('/')}`,
          fileid: item.id,
          filename: item.name,
          parentfolderid: item.parentfolderid,
          filecurvernumstr: item.lastvernumstr,
          filecurverid: item.lastverid,
          filecursize: item.size,
          filecurremark: item.remark,
          filecreatetime: moment(item.createtime).format('YYYY-MM-DD hh:mm:ss'),
          filecreateoperator: item.creatorid,
          filecreateoperatorname: item.creatorname,
          filemodifyoperatorname: item.editorname,
          nowornewversions: `${item.edition}/${item.lastverid}`,
          modifydatetime: moment(item.modifytime).format('YYYY-MM-DD hh:mm:ss'),
          filenamepath: `${item.relativepath?.split('\\').join('/')}`,
          securitylevelname: item.securitylevelname,
        };
      });
      setTotal(res.docListInfo?.Settings?.searchTotalCount);
      setData(arr);
      setSpinning(false);
    } else {
      let res = await service.searchFolders({
        folderId: folderId || 1,
        pageSize,
        pageNum,
        keyword,
        isSelect,
        isPerson,
      });

      let arr = res.docListInfo?.FoldersInfo?.map((item: any) => {
        return {
          ...item,
          key: item.id,
          name: item.name,
          size: item.size,
          creater: item.creatorname,
          modifier: item.editorname,
          modifyDate: moment(item.modifytime).format('YYYY-MM-DD hh:mm:ss'),
          edition: item.lastvernumstr,
          address: `${item.relativepath?.split('\\').join('/')}`,
          folderid: item.id,
          foldername: item.name,
          foldersize: item.size,
          parentfolderid: item.parentfolderid,
        };
      });

      setTotal(res.docListInfo?.Settings?.searchTotalCount);
      setData(arr);
      setSpinning(false);
    }
  };

  useEffect(() => {
    if (visibleModal) {
      if (searchValue) {
        search({
          folderId: selectFolder?.id,
          pageSize,
          pageNum: current,
          keyword: searchValue,
          isPerson: selectFolder?.topfolderpath == '2',
        });
      } else {
        if (loadedKeys) {
          getFileOrFolder(selectFolder);
        }
      }
    }
  }, [current, pageSize, isSelect]);

  const treeDataMore = (
    list: DataNode[],
    key: React.Key,
    children: DataNode[],
    count: number,
  ): DataNode[] => {
    return list.map((node) => {
      if (node.key === key) {
        let newData = [...node.children!];
        let more = newData.splice(newData.length - 1, 1);
        children.forEach((element) => {
          newData.push(element);
        });
        if (newData?.length < count) {
          newData.push(more[0]);
        }
        return {
          ...node,
          children: newData,
        };
      }

      if (node.children) {
        return {
          ...node,
          children: treeDataMore(node.children, key, children, count),
        };
      }

      setLoading(true);
      return node;
    });
  };

  let isTrue = true;
  let nodeData: any;

  const lookupParent = (list: any[], key: string) => {
    list.filter((node) => {
      if (node.key === key) {
        isTrue = false;
        nodeData = node;
      }

      if (node.children && isTrue) {
        lookupParent(node.children, key);
      }
    });
  };

  const onSelect = async (key: any, e: any) => {
    if (key.length && key?.[0]?.indexOf('undefined') !== -1) {
      if (!loading) {
        return;
      }
      setLoading(false);
      lookupParent(treeData, e.node.parentKey);
      isTrue = true;

      let pageNum = Math.ceil((nodeData.children.length - 1) / systemNum) + 1;
      let data = await service.getChildrenFolderListByPage({
        topFolderId: e.node.gid,
        pageNum,
      });
      nodeData = null;

      let newData = data.Children.map((v: any) => {
        return util.formatData(v);
      });

      setTreeData((oldData) =>
        treeDataMore(oldData, e.node.parentKey, newData, e.node.count),
      );
      setLoading(true);
      return;
    }
    setSpinning(true);
    setCurrent(1);
    setSelectedKeys([e.node?.key]);
    setSelectFolder(e.node);
    setExpandedKeys((expanded: string[]) => {
      let oldExpanded = [...expanded];
      let num = oldExpanded.findIndex((v) => e.node?.key === v);
      if (num < 0) {
        oldExpanded.push(e.node?.key);
      }
      return oldExpanded;
    });
  };

  useEffect(() => {
    if (searchValue && visibleModal) {
      onSearch(searchValue || '');
    } else {
      if (selectFolder) {
        getFileOrFolder(selectFolder);
      }
    }
  }, [selectFolder]);

  const getFileOrFolder = async (node: any) => {
    if (mode === 'SelectFile') {
      let res = await service.getFolderChildrenFiles({
        folderId: node?.id || node,
        pageNum: current,
        pageSize,
      });
      if (res.Info?.length > 0) {
        let arr = res.Info?.map((item: any) => {
          return {
            ...item,
            key: item.fileid,
            name: item.filename,
            size: item.filecursize,
            creater: item.filecreateoperatorname,
            modifier: item.filemodifyoperatorname,
            modifyDate: item.filemodifytime,
            edition: item.filecurvernumstr,
            address: `${item.relativepath?.split('\\').join('/')}`,
          };
        });
        setTotal(res.Total);
        setData(arr);
      } else {
        setTotal(0);
        setData([]);
      }
      setSpinning(false);
    } else {
      let res = await service.getFolderChildrens({
        folderId: node?.id || node,
        pageNum: current,
        pageSize,
      });
      if (node.topfolderpath === '2' && hidePersonalChildren) {
        res.Total = 0;
        if (res?.Info?.children) {
          res.Info.children = [];
        }
      }
      if (res.result === 0) {
        setTotal(res.Total);
        let arr = res.Info.children?.map((item: any) => {
          return {
            ...item,
            key: item.folderid,
            name: item.foldername,
            address: `${item.relativepath?.split('\\').join('/')}`,
            folderid: item.folderid,
            foldername: item.foldername,
            foldersize: item.foldersize,
            parentfolderid: item.parentfolderid,
          };
        });

        if (
          ((topFolder?.length > 0 ? topFolder[0].id : 1) ===
            res.Info.folderid &&
            current === 1 &&
            topFolder?.[0]?.id !== -1) ||
          (res.Info.parentfolderid === 2 && current === 1)
        ) {
          let oldArr = [...(arr || [])];
          oldArr.unshift({
            ...res.Info,
            children: null,
            key: res.Info.folderid,
            name:
              res.Info.parentfolderid === 2
                ? fileData.gerenku
                : res.Info.foldername,
            address: `${res.Info.relativepath?.split('\\').join('/')}`,
            folderid: res.Info.folderid,
            foldername: res.Info.foldername,
            foldersize: res.Info.foldersize,
            parentfolderid: res.Info.parentfolderid,
          });
          arr = [...oldArr];
        }

        setSpinning(false);
        setData(arr);
      }
    }
  };

  const selectRow = (record: any) => {
    let selectedRowKey = [...selectedRowKeys];

    if (selectedRowKey.indexOf(record.key) > -1) {
      if (multiple) {
        selectedRowKey.splice(selectedRowKey.indexOf(record.key), 1);
      }
    } else {
      selectedRowKey.push(record.key);
    }

    let oldSelectData = [...selectDatas];
    let num = oldSelectData.findIndex((item) => item.key === record.key);

    props.emit?.('onSelect', [record]);

    if (num > -1) {
      if (multiple) {
        oldSelectData.splice(num, 1);
      }
    } else {
      oldSelectData.push(record);
    }

    if (!multiple && selectedRowKey.length > 1) {
      oldSelectData = [oldSelectData[oldSelectData.length - 1]];
      selectedRowKey = [selectedRowKey[selectedRowKey.length - 1]];
    }

    setSelectDatas(oldSelectData);
    setSelectNum(oldSelectData.length);
    setSelectedRowKeys(selectedRowKey);
  };

  const onSelectRow = (record: { key: any }, selected: any) => {
    let oldSelectData = [...selectDatas];

    props.emit?.('onSelect', [record]);

    if (selected) {
      oldSelectData.push(record);
    } else {
      let num = oldSelectData.findIndex((v) => v.key === record.key);
      oldSelectData.splice(num, 1);
    }

    if (!multiple && oldSelectData.length > 1) {
      oldSelectData = [oldSelectData[oldSelectData.length - 1]];
    }

    setSelectDatas(oldSelectData);
    setSelectNum(oldSelectData.length);
    setSelectedRowKeys(oldSelectData.map((v) => v.key));
  };

  const onSelectAll = (
    selected: boolean,
    selectedRows: any,
    changeRows: any[],
  ) => {
    let oldSelectData = [...selectDatas];

    props.emit?.('onSelect', selectedRows, changeRows);

    if (selected) {
      changeRows.forEach((element) => {
        oldSelectData.push(element);
      });
    } else {
      changeRows.forEach((element) => {
        let num = oldSelectData.findIndex((v) => v.key === element.key);
        oldSelectData.splice(num, 1);
      });
    }

    setSelectDatas(oldSelectData);
    setSelectNum(oldSelectData.length);
    setSelectedRowKeys(oldSelectData.map((v) => v.key));
  };

  const rowSelection = {
    selectedRowKeys,
    hideSelectAll: multiple ? false : true,
    onSelect: onSelectRow,
    onSelectAll: onSelectAll,
    type: multiple ? 'checkbox' : 'radio',
  };

  const [data, setData] = useState<any[]>([]);

  const columns = [
    {
      title: getMessage('DocSelect.name'),
      dataIndex: 'name',
      key: 'name',
      width: 209,
      ellipsis: true,
      render: (text: string) => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: getMessage('DocSelect.size'),
      dataIndex: 'size',
      key: 'size',
      width: 89,
      render: (text: number) => {
        return formatBytes(text);
      },
    },
    {
      title: getMessage('DocSelect.creater'),
      dataIndex: 'creater',
      key: 'creater',
      width: 105,
      ellipsis: true,
      render: (text: string) => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: getMessage('DocSelect.modifier'),
      key: 'modifier',
      dataIndex: 'modifier',
      width: 105,
      ellipsis: true,
      render: (text: string) => {
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: getMessage('DocSelect.modifyDate'),
      dataIndex: 'modifyDate',
      key: 'modifyDate',
      width: 170,
    },
    {
      title: getMessage('DocSelect.edition'),
      dataIndex: 'edition',
      key: 'edition',
      width: 100,
    },
    {
      title: getMessage('DocSelect.address'),
      dataIndex: 'address',
      key: 'address',
      width: 209,
      ellipsis: true,
      render: (text: string) => {
        return <span title={text}>{text}</span>;
      },
    },
  ];

  const checkChange = (e: any) => {
    setIsSelect(e.target.checked);
  };

  const onExpand = (
    expandedKeys: any[],
    { expanded: bool, node }: { expanded: boolean; node: any },
  ) => {
    setExpandedKeys(expandedKeys);
  };

  const switcherIcon = ({ expanded: boolean }: { expanded: boolean }) => {
    return (
      <InbizIcon
        type="icon-tree-down"
        style={{ fontSize: 16, color: '#aaa' }}
      />
    );
  };

  const searchValueChange = (v: any) => {
    setSearchValue(v.target.value);
  };

  const suffix = useMemo(
    () => (
      <span onClick={() => onSearch(searchValue || '')}>
        <InbizIcon
          type={'icon-ic-sousuo'}
          style={{ color: '#999', fontSize: 16, cursor: 'pointer' }}
        />
      </span>
    ),
    [searchValue, isSelect],
  );

  return (
    <div className={isShowSelectData ? 'modalListShow inbizModalList' : 'inbizModalList'}>
      <div className="modalTree">
        {/* {!loading ?
          (<div className='spin'>
            <Spin spinning={true} style={{ margin: '220px 0 0 80px' }} />
          </div>)
          : null
        } */}
        {treeData && treeData?.length > 0 ? (
          <Tree
            switcherIcon={switcherIcon}
            treeData={treeData}
            onExpand={onExpand}
            showIcon
            loadData={onLoadData}
            icon={treeIcon}
            blockNode
            selectedKeys={selectedKeys}
            onSelect={onSelect}
            onLoad={onLoad}
            expandedKeys={expandedKeys}
          />
        ) : (
          <Spin spinning={true} style={{ margin: '220px 0 0 80px' }} />
        )}
      </div>
      <div className="modelTable">
        {hiddenFolder ? null : (
          <div>
            <Input
              placeholder={`${getMessage('DocSelect.theInput')}${mode === 'SelectFile'
                ? getMessage('DocSelect.file')
                : getMessage('DocSelect.folder')
                }${getMessage('DocSelect.name1')}`}
              onPressEnter={() => {
                onSearch(searchValue || '');
              }}
              className="modalSearch"
              value={searchValue}
              onChange={searchValueChange}
              suffix={suffix}
            />
            <Checkbox
              onChange={checkChange}
              className="modelCheck"
              checked={isSelect}
            >
              <span className="subfile">
                <TextWidget>DocSelect.includChildFolder</TextWidget>
              </span>
            </Checkbox>
          </div>
        )}
        <div
          className={`${isShowSelectData
            ? 'modalTableBox modalTableBoxShow'
            : 'modalTableBox'
            } ${hiddenFolder ? 'hideModal' : ''}`}
        >
          <ConfigProvider locale={locale}>
            <Table
              columns={columns.filter((item) => {
                if (mode === 'SelectFile') {
                  let arrColumn: string[] = [...columnField];
                  if (arrColumn.length < 1) {
                    arrColumn = [
                      'name',
                      'size',
                      'creater',
                      'modifier',
                      'modifyDate',
                      'edition',
                      'address',
                    ];
                  }
                  let find = arrColumn.find((v) => v === item.key);
                  return item.key === find;
                } else {
                  return item.key === 'name' || item.key === 'address';
                }
              })}
              dataSource={data}
              scroll={{
                y: isShowSelectData
                  ? data?.length > 0
                    ? hiddenFolder
                      ? 272
                      : 228
                    : hiddenFolder
                      ? 312
                      : 260
                  : data?.length > 0
                    ? hiddenFolder
                      ? 352
                      : 308
                    : hiddenFolder
                      ? 392
                      : 340,
              }}
              loading={spinning}
              pagination={false}
              onRow={(record: any) => ({
                onClick: () => {
                  selectRow(record);
                },
              })}
              //@ts-ignore
              rowSelection={rowSelection}
              className={data?.length > 0 ? '' : 'noData'}
            />
          </ConfigProvider>
        </div>
        <div className="modalPaginationBox">
          {/* <PageComponent
            total={total}
            current={current}
            pageSize={pageSize}
            setCurrent={setCurrent}
            setPageSize={setPageSize}
          /> */}
          <Pagination
            size='small'
            total={total}
            current={current}
            pageSize={pageSize}
            options={[10, 20, 30, 40, 50]}
            onChange={(current: { current: number; pageSize: number }) => {
              setCurrent(current.current);
              setPageSize(current.pageSize);
            }}
          />
        </div>
      </div>
    </div>
  );
}

export default forwardRef(ModalData);
export type { api };
